<template>
  <div>
    <a-modal
      :title="$t('all.autotext1457')"
      width="500px"
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        :model="form"
        :rules="formRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        ref="formRef"
      >
        <a-form-model-item :label="$t('all.autotext496')" prop="relationType">
          <a-select v-model="form.relationType" allowClear >
            <a-select-option v-for="(item, index) in $const.GUARDIAN_TYPE" :key="index" :value="item.value">{{ item.desc }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item :label="$t('all.autotext977')" prop="ptsName" v-if="$options.filters.isPtsVisible()">
          <a-input v-model="form.ptsName" :disabled="hasEdit" :placeholder="$t('all.autotext1490')" />
        </a-form-model-item>
        <a-form-model-item :label="$t('all.autotext192')" prop="evidenceType" v-if="$options.filters.isPtsVisible()">
          <a-select
            v-model="form.evidenceType"
            allowClear
            :disabled="hasEdit"
            @change="evidenceChange"
          >
            <a-select-option v-for="(item, index) in $const.DOCUMENT_TYPE" :key="index" :value="item.value">{{ item.desc }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item
          :label="$t('all.autotext1359')"
          prop="ptsIdentity"
          :rules="isRule"
          v-if="$options.filters.isPtsVisible()"
        >
          <a-input v-model="form.ptsIdentity" :disabled="hasEdit" :placeholder="$t('all.autotext1204')" />
        </a-form-model-item>
        <a-form-model-item :label="$t('all.autotext709')" prop="ptsPhone" v-if="$options.filters.isPtsVisible()">
          <a-input v-model="form.ptsPhone" :disabled="hasEdit" :placeholder="$t('all.autotext393')" />
        </a-form-model-item>
        <a-form-model-item :label="$t('all.autotext1492')" prop="relation">
          <a-select v-model="form.relation" allowClear >
            <a-select-option v-for="(item, index) in $const.RELATION_TYPE" :key="index" :value="item.value">{{ item.desc }}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item :label="$t('subject.autotext37')" prop="upload">
          <a-upload
            name="file"
            accept=".pdf, .jpg, .jpeg, .png"
            :file-list="fileList"
            :customRequest="handleCustom"
            @change="handleChange"
          >
            <a-button :disabled="fileList.length>0">{{ $t('all.autotext565') }}</a-button>
          </a-upload>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
import { editGuardian } from '@/api/overview/subject'
import { uploadFile } from '@/api/common'
export default {
  props: ['uId', 'visible', 'info', 'status', 'detail'],
  data () {
    return {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
      typeList: [
        {
          value: 1,
          name: this.$t('all.autotext689')
        }
      ],
      form: {
        relationType: '',
        ptsName: '',
        evidenceType: '',
        ptsIdentity: '',
        relation: '',
        ptsPhone: ''
      },
      formRules: {
        relationType: [{ required: true, message: this.$t('all.autotext574'), trigger: 'change' }],
        ptsName: [{ required: true, message: this.$t('all.autotext479'), trigger: 'blur' }],
        evidenceType: [{ required: true, message: this.$t('all.autotext326'), trigger: 'change' }],
        ptsIdentity: [
          { required: true, message: this.$t('all.autotext1204'), trigger: 'blur' },
          { pattern: /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/, message: this.$t('all.autotext1052') }
        ],
        ptsIdentityOther: [
          { required: true, message: this.$t('all.autotext1204'), trigger: 'blur' }
        ],
        relation: [{ required: true, message: this.$t('all.autotext954'), trigger: 'change' }],
        ptsPhone: [
          { required: true, message: this.$t('all.autotext396'), trigger: 'blur' },
          { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: this.$t('all.autotext140') }
        ]
      },
      fileList: []
    }
  },
  computed: {
    isRule () {
      return this.form.evidenceType === 1 ? this.formRules.ptsIdentity : this.formRules.ptsIdentityOther
    },
    hasEdit () {
      return this.status === 1
    }
  },
  watch: {
    visible (val) {
      if (val && this.info) {
        this.$nextTick(() => {
          this.form.relationType = this.info.relationType
          this.form.ptsName = this.info.ptsName
          this.form.evidenceType = this.info.evidenceType
          this.form.ptsIdentity = this.info.ptsIdentity
          this.form.relation = this.info.relation
          this.form.ptsPhone = this.info.ptsPhone
          if (this.info.proveFileUrl) {
            this.fileList = [{
              uid: '1',
              name: this.info.proveFileName,
              response: this.info.proveFileUrl
            }]
          }
        }, 200)
      }
    }
  },
  methods: {
    evidenceChange (e) {
      this.$refs.formRef.clearValidate('ptsIdentity')
    },
    handleOk () {
      this.$refs.formRef.validate(valid => {
        if (valid) {
          this.handleEditPts()
        }
      })
    },
    handleCancel () {
      this.fileList = []
      this.$refs.formRef.resetFields()
      this.$emit('update:visible', false)
    },
    handleCustom (file) {
      const params = new FormData()
      params.append('file', file.file)
      uploadFile(params).then(res => {
        file.onSuccess(res, file.file)
      }).catch(() => {
        this.fileList = []
        this.$message.error(this.$t('all.autotext1259'))
      }).finally(() => {})
    },
    handleChange ({ file, fileList }) {
      this.fileList = fileList
      console.log(this.fileList)
    },
    async handleEditPts () {
      let key = Object.keys(this.$const.GUARDIAN_TYPE).find(item => this.$const.GUARDIAN_TYPE[item].value === this.form.relationType)
      let relation = Object.keys(this.$const.RELATION_TYPE).find(item => this.$const.RELATION_TYPE[item].value === this.form.relation)
      await editGuardian({
        id: this.uId,
        guardianId: this.info ? this.info.id : '',
        ...this.form,
        proveFileUrl: this.fileList.length > 0 ? this.fileList[0].response : '',
        userAuthorizeId: this.detail.userAuthorizeId,
        authStatus: this.detail.authStatus,
        ptsNo: this.detail.ptsNo,
        relationTypeDesc: this.$const.GUARDIAN_TYPE[key].desc,
        relationDesc: this.$const.RELATION_TYPE[relation].desc,
        beforeData: this.info ? JSON.stringify(this.info) : ''
      })
      this.fileList = []
      this.$refs.formRef.resetFields()
      this.$emit('update:visible', false)
      this.$emit('handleOk')
    }
  }
}
</script>
